<template>
  <h1>hello vue3</h1>
  <p>{{ count }}</p>
  <p>{{ person.name }}</p>
  <button @click="update">更新</button>

  <Child ref="child" :count="count" @update="update" />
</template>

<script setup lang="ts">
// composition api 语法糖
// 整个script标签相当于setup函数
import { ref, reactive, watch, computed, onMounted } from "vue";
// 引入即注册
import Child from "./views/Child/index.vue";

const child = ref();

onMounted(() => {
  console.log(111);
  console.log(child.value);
});

// 定义即暴露
const count = ref(0);

const person = reactive({ name: "jack" });

const update = () => {
  count.value++;
};

watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});
</script>

<style scoped></style>
